<template>
    <div>
        <div v-for="(item, index) in answerArr" :key="index" class="input-area">
            <div class="serial">{{ index + 1 }}、</div>
            <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入答案"
                v-model="item.value"
                :disabled="isDisabled"
                @input="onInput"
            >
            </el-input>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        answerList: {
            type: Array
        },
        value: {
            type: String
        },
        isDisabled: {
            type: Boolean
        },
        answerLog: {
            type: Array
        },
        is_t_x: Number
    },
    data() {
        return {
            answer: "",
            answerArr: []
        };
    },
    computed: {},
    watch: {
        answerLog(newVal) {
            if (newVal) {
                this.answerLog.forEach((item, index) => {
                    this.answerArr[index].value = item;
                });
            }
        }
    },
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        for (let i = 0; i < this.answerList.length; i++) {
            this.answerArr.push({ num: i, value: "" });
        }
        if (this.answerLog.length > 0) {
            this.answerLog.forEach((item, index) => {
                this.answerArr[index].value = item;
            });
        }
    },
    methods: {
        onInput() {
            // 此定时器解决了@input事件比v-model先执行的问题
            setTimeout(() => {
                let answer_arr = []; //临时数组
                for (let i = 0; i < this.answerArr.length; i++) {
                    answer_arr.push(this.answerArr[i].value);
                    this.answer = answer_arr.join(",");
                }
                this.$emit("getArea", this.answer);
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.input-area {
    margin-top: 20px;
    .serial {
        margin-bottom: 5px;
    }
}
</style>
